<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/base :: Layout(~{::content},~{::title}, _,_,_,_,_,_,~{::monitor2Menu},~{::scripts},_)}">
<title>监控数据详情</title>

<content>
    <div class="layui-fluid" style="padding: 0px;">
        <div class="layui-row">

            <div class="layui-col-md1 layui-col-lg1 layui-col-sm1">
                <div id="detailchart" style="width: 1200px;height:600px;margin-top: 20px"></div>
            </div>
            <div class="layui-col-sm3 layui-col-md3 layui-col-lg3 layui-col-lg-offset4 layui-col-md-offset4 layui-col-sm-offset4 " style="margin-top: 20px;margin-right: 20px">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <select name="deviceIdList" lay-filter="deviceId" id="idList">
                                <option value="0">请选择一个设备</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-sm3 layui-col-md3 layui-col-lg3  " style="margin-top: 20px">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-size: 20px"><strong>更新周期</strong></label>
                        <div class="layui-input-block">
                            <select name="interval" lay-filter="interval">
                                <option value="1000">1秒</option>
                                <option value="3000">3秒</option>
                                <option value="5000">5秒</option>
                                <option value="10000">10秒</option>
                                <option value="20000">20秒</option>
                                <option value="30000">30秒</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>


</content>


<dd class="layui-this" th:fragment="monitor2Menu">
    <a href="/pages/monitor2">监控数据详情</a>
</dd>

<div th:fragment="scripts">
    <script th:src="@{/echarts-4.2.1/echarts.min.js}"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var interval = 1000;
        var detailChart = echarts.init(document.getElementById('detailchart'));
        var data1 = new Array();
        var data2 = new Array();
        var id = '0';
        var update = setInterval('drawCharts(id)',interval);
        layui.use(['jquery','form'],function () {
            var $ = layui.$;
            var form = layui.form;
            var select = document.getElementById('idList');
            //后面就跟你平时使用jQuery一样
            $.get("/api/surid/",function (data) {
                for(i=0;i<data.length;i++){
                    var device = data[i];
                    var option = document.createElement('option');
                    option.setAttribute('value',device.id);
                    option.innerText=device.name;
                    select.appendChild(option);
                    form.render('select');
                }
            });
            form.on('select(deviceId)', function(data){
                data1 = [];
                data2 = [];
                detailChart.clear();
                clearInterval(update);
                id = data.value;
                update = setInterval('drawCharts(id)',interval);
            });
            form.on('select(interval)', function(data){
                clearInterval(update);
                interval = data.value;
                update = setInterval('drawCharts(id)',interval);
            });
        });

        function drawCharts(id) {
            var date = new Date();

            var $ = layui.$;
            //后面就跟你平时使用jQuery一样
            $.get("/api/surdetails" + "?id=" + id,
                function (data) {
                    var type = Object.keys(data);
                    data1.push([date, data[type[0]]]);
                    data2.push([date, data[type[1]]]);
                    if (data1.length > 60) {
                        data1.shift();
                        data2.shift();
                    }
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '设备监控情况',
                            left: 80,
                            textStyle: {
                                fontSize: 22
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'time',
                            name: '时间'
                        },
                        yAxis: {},
                        legend: {
                            left: 200,
                            bottom: 0,
                            itemHeight: 28,
                            itemWidth: 70
                        },
                        series: [
                            {
                                name: type[0],
                                type: 'line',
                                data: data1,
                                symbol: 'emptyTriangle',
                                symbolSize: 6,
                                lineStyle: {
                                    width: 2
                                }
                            },
                            {
                                name: type[1],
                                type: 'line',
                                data: data2,
                                symbol: 'emptyCircle',
                                symbolSize: 6,
                                lineStyle: {
                                    width: 2
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    detailChart.setOption(option);
                }
            );

        }
    </script>


</div>
</html>